<template>
    <img src="@/assets/svg/crystalBall.svg" class="logo vue" alt="Vue logo" />
    <div class="tarot-view">
        <h3>迷茫的人啊！你想要问什么？</h3>
        <div class="tarot-container">
            <lay-input
                class="input-question"
                placeholder="请讲出你的疑惑"
                ref="inputRef"
                v-model="divination"
                @keyup.enter="handleSubmit"
            ></lay-input>
        </div>
        <div class="white-bottom"></div>
    </div>
    <div class="overlay" v-show="loading">
        <img src="@/assets/gifs/loading.gif" alt="" />
    </div>
</template>

<script lang="ts" setup name="tarotView">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import request from "../plugin/request";
import { layer } from "@layui/layui-vue";

const router = useRouter();
const divination = ref("");
const inputRef = ref();
const loading = ref(false);
onMounted(() => {
    inputRef.value.focus();
});

const handleSubmit = () => {
    loading.value = true;
    request
        .post("/divination", { question: divination.value })
        .then((res) => {
            loading.value = false;
            router.push({ path: "result", state: res.data });
        })
        .catch((err) => {
            loading.value = false;
            layer.msg(err, { time: 1000 });
        });
};
</script>

<style lang="scss" scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
.tarot-view {
    h3 {
        margin-top: 2rem;
        margin-bottom: 2rem;
        font-weight: bold;
        font-style: italic;
        background: linear-gradient(to right, #a531dc, #4300b1);
        /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
        -webkit-background-clip: text;
        /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent;
        /*给文字设置成透明*/
    }

    .tarot-container {
        padding: 2px;
        border: solid 3px transparent;
        border-radius: 40px;
        background-image: linear-gradient(to right, #8a88fb, #d079ee);

        .input-question {
            width: 20rem;
            border: 1px solid #fff;
            border-radius: 20px;
        }
    }
    .white-bottom {
        height: 10rem;
    }
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        width: 10rem;
        height: 10rem;
        border-radius: 1rem;
        opacity: 0.85;
    }
}
</style>